<template>
	<view class="login">
		<image @click="fanhui" class="login-bg" src="https://x.bilinmeiju.com/static/denglu/close.png" mode=""></image>
		<view class="login-content" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="login-content-header"
				:style="{ height: menuButtonHeight + (menuButtonTop - statusBarHeight) * 2  + 'px' }">
				<image @click="fanhui" class="login-content-header-close"
					src="https://x.bilinmeiju.com/static/close.png" mode="">
				</image>
			</view>
			<view class="login-content-box">
				<uni-forms ref="form" :modelValue="dlFormData" :rules="rules">
					<view class="login-content-box-phone">
						欢迎进入<text>比邻美居智慧社区</text>
					</view>

					<view class="login-content-box-input" style="margin: 100rpx 0 70rpx;">
						<input v-model="dlFormData.phoneNumber" type="number" placeholder="请输入手机号码">
					</view>

					<view class="login-content-box-input">
						<input v-model="dlFormData.password" type="password" placeholder="请输入密码">
					</view>
					<view @click="denglu" class="login-content-box-button active">
						登录
					</view>

					<view class="login-content-box-wechat">
						登录即表示同意<text>《隐私保护声明》</text>和<text>《用户使用协议》</text>
					</view>
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dlFormData: {
					phoneNumber: '',
					password: ''
				},
			};
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.statusBarHeight
			},
			menuButtonHeight() {
				return this.$store.state.menuButtonHeight
			},
			menuButtonTop() {
				return this.$store.state.menuButtonTop
			}
		},
		onLoad() { //初次加载执行
			var token = uni.getStorageSync('token')
			if (token) {
				this.fanhui()
				console.log('token', token);
			}
		},
		onShow() {

		},
		methods: {
			wangji() {
				uni.navigateTo({
					url: '/pages/login/login-password-setting'
				})
			},
			zhuce() {
				uni.navigateTo({
					url: '/pages/login/zhuce'
				})
			},
			denglu() {
				//获取提交时的表单数据
				let data = this.dlFormData;
				console.log(JSON.stringify(data))
				let name = this.dlFormData.phoneNumber;
				let password = this.dlFormData.password;
				// if(name.lenght>12){
				// 	console.log('长度不够12位')
				// }else{
				// 	uni.switchTab({
				// 		url: '/pages/index/home'
				// 	})
				// }

				this.settlement()
			},
			fanhui() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			settlement() {
				var that = this;
				// that.$post('wuyeapi/login?username='+that.dlFormData.phoneNumber+'&password='+that.dlFormData.password,{
				that.$post('wuyeapi/login', {
					username: that.dlFormData.phoneNumber,
					password: that.dlFormData.password,
				}, res => {
					uni.setStorageSync('token', res.data.token)

					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					setTimeout(res => {
						console.log('213123');
						that.fanhui()
					}, 1000)
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-image: url('../../static/dlbj.png');
	}

	.login {
		margin-top: 90rpx;
		width: 100%;
		height: 100%;

		&-bg {
			margin-left: 20rpx;
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			z-index: -1;
		}

		&-content {
			width: 100%;
			box-sizing: border-box;

			&-header {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;

				&-close {
					width: 30rpx;
					height: 30rpx;
				}
			}

			&-box {
				width: 580rpx;
				padding-top: 130rpx;
				display: flex;
				flex-direction: column;
				margin: 0 auto;

				&-label {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #808080;
					font-size: 24rpx;
					margin-top: 30rpx;
				}

				&-input {
					width: 100%;
					height: 84rpx;
					border-bottom: 1px solid #efefef;
					display: flex;
					align-items: center;

					>input {
						width: 100%;
						height: 100%;
					}
				}

				&-phone {
					color: #000000;
					font-size: 36rpx;
					font-weight: bold;

					>text {
						color: #2D75FC;
					}
				}

				&-text {
					color: #999999;
					font-size: 24rpx;
					margin-top: 50rpx;
				}

				&-button {
					width: 100%;
					height: 88rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: normal;
					background: #EEEEEE;
					color: #999999;
					margin-top: 40rpx;
				}

				.active {
					margin-top: 100rpx;
					color: #fff;
					background: linear-gradient(to top, #33cbc6, #3188f0);
				}

				&-checkbox {
					display: flex;
					align-items: center;
					margin-top: 40rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 14rpx;
					}

					&-text {
						color: #666666;
						font-size: 24rpx;
						flex: 1;
						line-height: 40rpx;

						>text {
							color: #C98E1C;
						}
					}
				}

				&-wechat {
					width: 100%;
					position: absolute;
					bottom: 76rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999999;
					font-size: 24rpx;

					text {
						color: #000000;

					}
				}
			}
		}


	}
</style>
